<script setup lang="ts">
import type { IConditionGroup, Option } from './typing'
import { DeleteOutlined, PlusOutlined } from '@vicons/antd'
import { computed } from 'vue'
import Condition from './Condition.vue'

const props = defineProps<{
  removable?: boolean
  remove?: () => void
}>()

const model = defineModel<IConditionGroup>('value', { default: null })

const relationOptions = inject<Option[]>('defaultRelations')

function addCondition() {
  (model.value.children ??= []).push({})
}

function addConditionGroup() {
  (model.value.children ??= []).push({ relation: 'and', children: [{}] })
}

function remove(idx: number) {
  model.value.children?.splice(idx, 1)
}

const showRemove = computed(() => props.removable !== false)

function emitRemove() {
  props.remove && props.remove()
}
</script>

<template>
  <div class="condition-group">
    <div class="condition-group__header">
      <n-select v-model:value="model.relation" :options="(relationOptions as any)" class="condition-group__relation" size="small" />
      <n-button size="small" @click="addCondition">
        条件
        <template #icon>
          <PlusOutlined />
        </template>
      </n-button>
      <n-button size="small" @click="addConditionGroup">
        条件组
        <template #icon>
          <PlusOutlined />
        </template>
      </n-button>
      <div class="ml-auto" />
      <n-button v-if="showRemove" size="small" text type="error" @click="emitRemove">
        <template #icon>
          <DeleteOutlined />
        </template>
      </n-button>
    </div>
    <div class="condition-group__body" :class="{ 'has-children': model?.children?.length }">
      <template v-for="(child, idx) in model.children" :key="idx">
        <div class="condition-group__item">
          <Condition v-if="!child.children" v-model:value="model.children![idx]" />
          <n-button v-if="!child.children" size="small" text type="error" @click="remove(idx)">
            <template #icon>
              <DeleteOutlined />
            </template>
          </n-button>
          <ConditionGroup v-else v-model:value="model.children![idx]" :removable="true" :remove="() => remove(idx)" />
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped>
.condition-group {
  border: 1.5px solid var(--line-color);
  padding: 16px;
  border-radius: 8px;
  background: var(--bg-color);
  position: relative;
  transition: box-shadow 0.2s;
}

.condition-group__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--gap);
  gap: 8px;
}

.condition-group__relation {
  width: 80px;
}

.condition-group__body {
  position: relative;
  padding-left: calc(var(--gap) * 2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.condition-group__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.condition-group__body::before {
  display: none;
  content: '';
  position: absolute;
  left: calc(var(--gap) / 2);
  top: calc(var(--gap) * -1);
  bottom: 0;
  width: var(--line-size);
  background: var(--line-color);
}

.condition-group__body.has-children::before {
  display: block;
}

.condition-group__item::before {
  content: '';
  position: absolute;
  left: calc(var(--gap) * -2 + 6px + var(--line-size));
  top: 50%;
  width: calc(var(--gap) * 1.5 - var(--line-size));
  height: var(--line-size);
  background: var(--line-color);
  transform: translateY(-50%);
}

.condition-group__item:last-child::after {
  content: '';
  position: absolute;
  left: calc(var(--gap) * -1.5);
  top: calc(50% + var(--line-size) / 2);
  width: var(--line-size);
  height: 50%;
  background: var(--bg-color);
  /* background: red; */
}
</style>
